<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>

	<style>
		.main-body {
			background-color: #f4f4f4;
		}
		
		.search-bar {
			position: absolute;
			left: 40px;
			bottom: 8px;
			right: 55px;
			background-color: #fff;
			height: 26px;
			border-radius: 30px;
		}
		
		.search-bar input {
			width: 100%;
			height: 100%;
			background: none;
			border: none;
			text-align: center;
			font-size: 14px;
		}
		
		.weui-cell {
			font-size: 14px;
		}
		
		.weui-label {
			width: 60px;
		}
		
		.history{
			padding:0 14px;
		}
		.history a{
			display: inline-block;
			background-color: #e4e4e4;
			margin: 10px 10px 0 0;
			padding:3px 8px ;
			border-radius: 5px;
			color:#666;
			font-size: 15px; 
		}
		.fenlei{
			padding:0 14px 20px 14px;
		}
		.fenlei a{
			display: inline-block;
			margin: 10px 10px 0 0;
			border-radius: 5px;
			padding:3px 8px ;
			color:#45a75c;
			font-size: 15px;
			border: #ccc 1px solid;
		}
	</style>

	<body>
		
		<div id="app">
			
        
			<form id="form" v-on:submit.prevent action="#">
				
				<div class="xiaoyi-header header-red" id="header">
					<div class="xiaoyi-header-left"><i class="iconfont icon-back mui-action-back" onclick="wsClose()"></i></div>
					<div class="search-bar">
						<input type="search" @keyup.enter="onSubmit" value="" v-model="keyword" id="keyword" placeholder="请输入关键词">
					</div>
					<div class="xiaoyi-header-right"><span style="margin: 10px 10px 0 0 ; display: block;" @click="onSubmit">搜索</span></div>
				</div>

				<div class="main-body" id="main">
					<div class="weui-cells__title" flex="">
						<span flex-box="0">聚石推荐 </span>
						<span flex-box="1"></span>
					</div>
					<div class="fenlei">
						<template v-if="hotKeyword.length>0">
							<a  href="javascript:;" v-for="(vo,index) in hotKeyword" @click="search(vo)" v-html="vo"></a>
						</template>
					</div>
					<div class="line-top"></div>
					<div class="weui-cells__title" flex="">
						<span flex-box="0">历史搜索记录 </span>
						<span flex-box="1"></span>
						<a flex-box="0" href="javascript:;" @click="clear()" style="color: #999;"><i class="iconfont icon-delete"></i> 清除记录</a>
					</div>
					
					
					
					<div class="history">
						
						<template v-if="items.length>0">
							<a  href="javascript:;" v-for="(vo,index) in items" @click="search(vo)" v-html="vo">
							</a>
							
						</template>

						<template v-else>
							<a class="weui-cell weui-cell_access" href="javascript:;">
								<div class="weui-cell__bd">
									<p>暂无搜索记录</p>
								</div>
							</a>
						</template>

					</div>

				</div>
			</form>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			
			var nativeWebview, imm, InputMethodManager;
			var initNativeObjects = function() {
				if(mui.os.android) {
					var main = plus.android.runtimeMainActivity();
					var Context = plus.android.importClass("android.content.Context");
					InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
					imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
				} else {
					nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
				}
			};
			var showSoftInput = function() {
				if(mui.os.android) {
					imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
				} else {
					nativeWebview.plusCallMethod({
						"setKeyboardDisplayRequiresUserAction": false
					});
				}
				setTimeout(function() {
					//此处可写具体逻辑设置获取焦点的input
					var inputElem = document.querySelector('#keyword');
					inputElem.focus();
				}, 10);
			};
			
			mui.plusReady(function() {
				
				initNativeObjects();
				showSoftInput();
				
				var vm = new Vue({
					el: "#app",
					data: {
						keyword:'',
						items: [],
						hotKeyword:[]
					},
					mounted: function() {
						this.inits()
					},
					methods: {
						inits: function() {
							var vm = this;
							var _data = Smarge.get('search_history_list') || undefined;
							if( _data != undefined) { 
								vm.items = Smarge.get('search_history_list');
							}
							Get(SERVER_URL + "&c=Public&a=getConfig", { 
								keys: 'SEARCH_HOT_KEYWORD'
							}, function(data) {
								vm.hotKeyword = data.info.SEARCH_HOT_KEYWORD;
							})
						},
						onSubmit : function(){
							var k = this.keyword;
								if(!k) {
									mui.toast('请输入关键字');
									return false;
								}
								vm.search(k) 
						},
						search: function(k) {
							var vm = this ;
							vm.items.unshift(k)
							//清楚重复数据
							vm.items = removeDuplicates(vm.items)
							Smarge.set('search_history_list',vm.items); 
							Smarge.set('search_keyword', k)
							clicked('goods_search_list.html', 'pop-in');
						},
						clear: function() {
							Smarge.set('search_history_list','');
							vm.items = Smarge.get('search_history_list');
						}

					}
				});

			});
		</script>
	</body>

</html>